import React from "react";

/*
  纯函数:
    1. 入参相同的时候，出参就相同
    2. 同步函数
    3. 不能改变入参
*/
// 当一个组件需要被多次调用，有的地方需要显示不同的内容
// 那么这个不同的内容就用props传进去

// 函数组件可以使用props参数来接受所有的自定义属性
const Child1 = ({ name, age }) => {
  // console.log(props);
  // const { name, age } = props;

  return (
    <div>
      child1组件 - {name} - {age}
    </div>
  );
};

// 类组件可以使用this.props来接受自定义属性
class Child2 extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        child2组件 - {this.props.name} - {this.props.likes}
      </div>
    );
  }
}

const App = () => {
  return (
    <>
      <h2>props</h2>
      <Child1 name="zhangsan" age="20" />
      {/* 如果传递的值不希望是字符串的，需要加一个大括号 */}
      <Child2 name="lisi" likes={["c", "t", "r", "l"]} />
    </>
  );
};

export default App;
